<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        img {
            vertical-align: top;
        }

        .swiper {
            width: 1226px;
            margin: 50px auto;
            position: relative;
            overflow: hidden;

            .swiper-wrapper {
                display: flex;
                width: fit-content;
                position: relative;

                .swiper-item {
                    width: 1226px;

                    & img {
                        width: 100%;
                    }
                }
            }

            .swiper-pagination {
                display: flex;
                position: absolute;
                right: 50px;
                bottom: 20px;

                & li {
                    width: 15px;
                    height: 15px;
                    border-radius: 50%;
                    background-color: aliceblue;
                    border: 1px solid rgba(0, 0, 0, 0.5);
                    margin: 0 5px;

                }

                .active {
                    background-color: aquamarine;
                }
            }


        }
    </style>
</head>

<body>
    <div class="swiper">
        <div class="swiper-wrapper">
            <div class="swiper-item"><img src="../images/1.webp" alt=""></div>
            <div class="swiper-item"><img src="../images/2.webp" alt=""></div>
            <div class="swiper-item"><img src="../images/3.webp" alt=""></div>
            <div class="swiper-item"><img src="../images/4.webp" alt=""></div>
            <!-- 第五张 -->
            <div class="swiper-item"><img src="../images/1.webp" alt=""></div>
        </div>
        <ul class="swiper-pagination">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
<script src="../js/animate.js"></script>
<script>
    /* 
        轮播实现步骤
        1. 点击切换
            (1) 四张图片对应四个导航(点)  => 一一对应
            (2) 点第n个导航 显示第n张图片 => swiperWrapper需要向左滚动n-1一张图片(和导航对应的下标对应)



        2. 自动切换
        3. 移入暂停,移出启动
    
    
    */

    var swiper = document.querySelector(".swiper");
    var swiperWrapper = document.querySelector(".swiper-wrapper");
    var liList = document.querySelectorAll(".swiper-pagination li");

    var swiperWidth = swiper.clientWidth;
    var index = 0; // 全局变量 记录轮播的下标(默认显示第一张)
    var timer = null;

    // 页面加载时启动自动轮播
    autoPlay();

    // 点击切换
    for (let i = 0; i < liList.length; i++) {
        let li = liList[i];
        li.onclick = function () {

            index = i; // 点击切换时,同步自动轮播下标 => 下次轮播从当前位置开始

            for (var j = 0; j < liList.length; j++) {
                liList[j].className = "";
            }
            liList[i].className = "active";

            animate(swiperWrapper, { left: -swiperWidth * i })
        }
    }

    // 移入暂停,移出启动
    swiper.onmouseenter = function () {
        clearInterval(timer);
    }

    swiper.onmouseleave = function () {
        autoPlay()
    }

    // 问题: 当前窗口切换到其他窗口 => 页面不动,计时器还在执行  => index会自增  => 当从其他窗口切回当前窗口时,  轮播会直接滚动到对应index为止
    window.onblur = function(){
        clearInterval(timer);
    }

    window.onfucus = function(){
        autoPlay();
    }


    // var count = 0
    // var timer1 = setInterval(function(){
    //     count ++;
    //     console.log(count);
    // },1000)



    function autoPlay() {
        // 自动切换  
        clearInterval(timer);
        timer = setInterval(function () {
            index++;
            console.log(index);

            // 0 1 2 3 4 (5张)

            // 如何让第四张平滑的切换到第一张?
            // 在第四张之后,添加第五张图片(同第一张), 当第四张滚动到第五张时, 视觉上是第四张滚动第一张(启示是第五张), 让通过animate()中的回调函数判断是否是第五张,如果是第五张,直接切换至第一张

            // 伴随问题: 当前有五张图片,但是只有四个导航, 所以切换到第五张图片时,没有对应的导航对应 =>  代码会报错
            // 解决方案: 第五张看起来同第一张, 滚动时判断,如果是第五张,把第一个导航变为活跃状态

            for (var j = 0; j < liList.length; j++) {
                liList[j].className = "";
            }
            // 判断是否是第五张,把第一个导航变为活跃状态
            var activeIndex = index >= liList.length ? 0 : index;
            liList[activeIndex].className = "active";

            animate(swiperWrapper, { left: -swiperWidth * index }, function () {
                if (index >= liList.length) { // index >= 4 =>如果是第五张
                    swiperWrapper.style.left = 0;
                    index = 0;
                }
            });
        }, 3000)
    }





</script>

</html>